﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        let context = canvas.getContext("2d"); //绘图上下文
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        //判断主题色
        gPaint.defaultUIStyle = "light";
        addDefaultEvent(canvas, gPaint);

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            onPaintDefault(view, paint, clipRect);
            if (view.viewName == "TabPage") {
                paint.drawLine("rgb(255,0,0)", 1, [], 100, 100, 300, 300);
                paint.drawLine("rgb(255,0,255)", 1, [5, 5], 100, 300, 300, 100);
            } else if (view.viewName == "TabPage2") {
                paint.drawRect("rgb(0,255,0)", 1, [], 100, 100, 200, 200);
                paint.fillRect("rgb(0,255,255)", 250, 250, 350, 350);
            } else if (view.viewName == "TabPage3") {
                paint.drawEllipse("rgb(0,255,255)", 1, [], 100, 100, 200, 200);
                paint.fillEllipse("rgb(255,0,255)", 250, 250, 350, 350);
            } else if (view.viewName == "TabPage4") {
                paint.drawText("FaceCat", "rgb(255,0,0)", "Default,30", 100, 100);
            } else if (view.viewName == "TabPage5") {
                paint.beginPath();
                paint.addLine(100, 100, 150, 120);
                paint.addLine(150, 120, 130, 200);
                paint.addLine(130, 200, 200, 200);
                paint.addLine(200, 200, 250, 220);
                paint.drawPath("rgb(255,0,0)", 1, []);
                paint.closePath();
            } else if (view.viewName == "TabPage6") {
                paint.beginPath();
                paint.addLine(100, 100, 150, 120);
                paint.addLine(150, 120, 200, 200);
                paint.addLine(200, 200, 150, 200);
                paint.fillPath("rgb(0,0,255)");
                paint.closePath();
            }
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            try {
                canvas.width = document.documentElement.clientWidth;
                canvas.height = document.documentElement.clientHeight;
                scaleCanvas(gPaint);
                updateViewDefault(gPaint.views);
            } catch (err) {
                //alert(err);
            }
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        //解析加载XML
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
        <html xmlns="facecat">
            <head>
            </head>
            <body>
                <div dock="fill" type="tab" selectedindex="0">
                    <div name="TabPage" text="直线" type="tabpage" headersize="60,20"/>
                    <div name="TabPage2" text="矩形" type="tabpage" headersize="60,20"/>
                    <div name="TabPage3" text="圆" type="tabpage" headersize="60,20"/>
                    <div name="TabPage4" text="文字" type="tabpage" headersize="60,20"/>
                    <div name="TabPage5" text="折线" type="tabpage" headersize="60,20"/>
                    <div name="TabPage6" text="多边形" type="tabpage" headersize="60,20"/>
                </div>
            </body>
        </html>
`;
        renderFaceCat(gPaint, xml);
        
    </script>
</body>
</html>
